var $ ={
	one(slt:string):HTMLElement{
		return document.querySelector(slt) as HTMLElement;
	},
	
	all(slt:string):NodeListOf<HTMLElement>{
		return document.querySelectorAll(slt);
	},
}

class Lunbotu{

  sn:number=0;//当前图片索引号
  offsetTime:number;//自动轮播时间（毫秒）
  readonly max:number;//轮播图片个数
  readonly width:number;//轮播大盒子宽度
  readonly box:HTMLElement;//轮播大盒子
  readonly imgs: NodeListOf<HTMLImageElement>;//轮播图片
  readonly inbox:HTMLElement;//图片直接盒子
  operateLis:NodeListOf<HTMLLIElement>;//所有小方块
  operateLiOld:HTMLLIElement;//当前小方块
  timer:number=0;//定时器

  constructor(config:{
    boxSlt:string,
    offsetTime:number,
  }){

    // 轮播图大盒子
    this.box = $.one(config.boxSlt) as HTMLElement;
    this.width = this.box.offsetWidth;
    // this.box.style.height = this.width/2+"px";//重置高度
    // console.log(this.box.offsetWidth);
    this.offsetTime = config.offsetTime;

    // 图片小盒子
    this.inbox = this.box.firstElementChild as HTMLElement;
    // this.inbox.append(this.inbox.firstElementChild.cloneNode(true));

    // 所有轮播图片
    this.imgs = this.box.querySelectorAll('.imgBox img');
    // console.log(this.imgs);
    this.max = this.imgs.length;

    // 控制小方格
    this.operateLis = this.setOperateBtns().querySelectorAll("li") as NodeListOf<HTMLLIElement>;
    this.operateLiOld = this.operateLis[0];
    this.operateLiOld.className = "active";

    // 其它初始化设置
    this.init();
    this.autorun();

  }

  next(){
    this.sn++;
    if(this.sn>=this.max) this.sn = 0;
  }


  before(){
    this.sn--;
    if(this.sn<0) this.sn = this.max-1;
  }


  // 显示图片
  show(){
    // console.log(this.sn, this.max-1);
    this.inbox.style.transition = 'transform .3s';
    this.inbox.style.transform =  "translateX("+-this.sn*this.width+"px"+")";

    // console.log(this.sn);
    this.operateLiOld.className="";
    this.operateLis[this.sn].className="active";
    this.operateLiOld =  this.operateLis[this.sn];
  }

  // 前/后点击按钮
  clickBtnNextBefore(){

    let btns = document.createElement("div");
    btns.className="btnsBox";
    this.box.append(btns);

    // 创建前/后点击按钮
    btns.innerHTML=`
      <div class="beforeBtn">&lt;</div>
      <div class="nextBtn">&gt;</div>
    `;

    btns.onclick = (event:MouseEvent)=>{
      let btn = event.target as HTMLElement;
      if(btn.nodeName!="DIV") return;

      //停止自动播放
      clearInterval(this.timer);
      // 上/下一张
      btn.className=="nextBtn" ?  this.next() : this.before();
      this.show();
      // 重新开启自动播放
      this.autorun();
    }



  }


  init(){
    // 图片父标签拉开，使图片在一行显示
    this.inbox.style.width = this.width*this.max+100+"px"

    // 所有图片宽度适应父标签
    this.imgs.forEach(img=>{
      img.style.width=this.width+"px";
    });

    //生成上/下控制按钮和事件
    this.clickBtnNextBefore();


  }

  // 设置控制小圆点
  setOperateBtns():HTMLUListElement{
    // 生成控制小方格
    let operateBtnsHtml="";
    for(let n=0; n<this.max; n++){
      operateBtnsHtml += `<li data-sn="${n}"></li>`;
    }

    let operateBtns = document.createElement("ul");
    this.box.append(operateBtns);
    operateBtns.className = "operateBtns";
    operateBtns.innerHTML = operateBtnsHtml;

    // 绑定事件
    operateBtns.onmouseover = event=>{
      let li = event.target as HTMLLIElement;
      if(li.nodeName!='LI') return;
      clearInterval(this.timer);
      this.sn = Number(li.dataset.sn);
      this.show();
    }

    operateBtns.onmouseout = event=>{
      let li = event.target as HTMLLIElement;
      if(li.nodeName!='LI') return;
      this.autorun();
    }

    return operateBtns;
  }


  // 自动播放
  autorun(){
    this.timer = setInterval(()=>{
      this.next();
      this.show();
    }, this.offsetTime);
  }

}

// let lbt = new Lunbotu({boxSlt:"#lbt1", offsetTime:2000});
// lbt.init();
// lbt.clickNext('.next','.before');
// lbt.autorun();


